import { Select } from "antd";
import { element } from "prop-types";
import React, { ReactElement } from "react";
import { Component } from "react";

interface CascaderSection {
  dataGet: (values: Array<any>) => Promise<Array<any>>;
  renderOption: (data: any) => ReactElement;
  placeholder: string;
  closeSearch?: boolean; //是否关闭搜索框
  defaultValue?: number;

}

interface CustomCascaderProps {
  datasource: Array<CascaderSection>;
  onChange?: (values: Array<any>) => void;
  onSearch?: (values: Array<any>) => void;
  initValues?: Array<any>;
}

interface CustomCascaderState {
  values: Array<any>;
  datasource: Array<Array<any>>;
  enabled: Array<boolean>;
}

class CustomCascader extends Component<CustomCascaderProps, CustomCascaderState> {
  constructor(props: CustomCascaderProps) {
    super(props);
    var values: any[] = [];
    var enabled: boolean[] = [];
    var datasource: any[][] = [];
    props.datasource.forEach((item, index) => {
      values.push(undefined);
      if (index < 1) {
        enabled.push(false);
      } else {
        enabled.push(true);
      }

      datasource.push([])
    })
    this.state = {
      values, datasource, enabled
    }
  }

  componentDidMount() {
    this.props.onSearch;

    this.reload();
  }

  reload() {
    const newDataSource = [...this.state.datasource];
    const enable = [...this.state.enabled]; this.props.datasource[0].dataGet(this.state.values).then((data) => {
      newDataSource[0] = data;
      this.setState({ datasource: newDataSource })
      // console.log(newDataSource);
    });
    if (this.props.initValues?.length > 0) {
      this.props.datasource.map((element, index) => {
        if (index !== 0) {
          element.dataGet(this.props.initValues).then((resp) => {
            newDataSource[index] = resp;
            this.setState({ datasource: newDataSource });
          });
        }
      });
      this.props.initValues.forEach((element, index) => {
        if (element > 0) {
          enable[index] = false;
          if (index + 1 < this.props.initValues.length) {
            enable[index + 1] = false;
          }
        }
      })
      setTimeout(() => {
        this.setState({ enabled: enable });
        this.props.onChange?.(this.props.initValues);
      }, 200);
    }
  }



  render() {
    return <div>
      {
        this.props.datasource?.map((item, index) => {
          return <Select placeholder={item.placeholder}
            key={"select" + index}
            showSearch={!item.closeSearch}
            defaultValue={item?.defaultValue}
            disabled={this.state.enabled[index]}
            style={{ minWidth: "150px" }} value={this.state.values[index]}
            onChange={(value) => {
              const newState = [...this.state.values];
              newState[index] = value;
              const enable = [...this.state.enabled];
              for (let i = index + 1; i < newState.length; i++) {
                newState[i] = undefined;
                enable[i] = false;
              }

              for (let i = index + 2; i < newState.length; i++) {
                enable[i] = true;
              }

              this.setState({ values: newState, enabled: enable });
              this.props.onChange?.(newState);
              if (index < this.props.datasource.length - 1)
                this.props.datasource[index + 1].dataGet(newState).then((data) => {
                  const newDataSource = [...this.state.datasource];
                  newDataSource[index + 1] = data;
                  this.setState({ datasource: newDataSource })
                })
            }}>
            {
              this.state.datasource[index]?.map((option, i) => item.renderOption(option))
            }
          </Select>
        })
      }
    </div>
  }
}


export default CustomCascader;
